<template>
	<view>
		<view class="ssk">
			<view class="search">
				<input class="search-shuru" placeholder="请输入游戏名称内的商品" v-model="search" placeholder-class="pla" />
			</view>
			<view>
				<button class="search-ss" @click="search">
					搜索
				</button>
			</view>
		</view>

		<view class="xzq">
			<picker mode="multiSelector" @columnchange="bindMultiPickerColumnChange" :value="multiIndex"
				:range="multiArray">
				<view style="background-color: white;">
					{{ multiArray[0][multiIndex[0]] }}，
					{{ multiArray[1][multiIndex[1]] }}，
					{{ multiArray[2][multiIndex[2]] }}
				</view>
			</picker>
		</view>

		<view class="third">

			<view class="third-sp">
				<navigator url="/pages/yxhm/yxhm">
					<view class="third-sp_sp">
						<view class="tutu">
							<image class="third-sp_sp_tu" src="../../static/9.png"></image>
						</view>
						<view class="zcx">
							<view class="djzh"><text>顶级账号</text></view>
							<!-- <view class="third-sp_sp_zi"> -->
							<text class="third-sp-">测试测试测试测试测试测试测试测试测试测试测试测试测试</text>
							<!-- </view> -->
						</view>
						<view class="nans">英雄联盟-电信-艾欧尼亚</view>
						<view class="xiba">
							<image class="rz" src="../../static/xiba.png" mode="aspectFill"></image>
							<text class="sixth-tj_zh_mn">￥ 999999</text>
						</view>
						<view class="sjsj">上架时间：2022-01-03 18:50:09</view>
					</view>
				</navigator>
			</view>

			<view class="third-sp">
				<view class="third-sp_sp">
					<view class="tutu">
						<image class="third-sp_sp_tu" src="../../static/9.png"></image>
					</view>
					<view class="zcx">
						<view class="djzh"><text>顶级账号</text></view>
						<!-- <view class="third-sp_sp_zi"> -->
						<text class="third-sp-">测试测试测试测试测试测试测试测试测试测试测试测试测试</text>
						<!-- </view> -->
					</view>
					<view class="nans">英雄联盟-电信-艾欧尼亚</view>
					<view class="xiba">
						<image class="rz" src="../../static/xiba.png" mode="aspectFill"></image>
						<text class="sixth-tj_zh_mn">￥ 999999</text>
					</view>
					<view class="sjsj">上架时间：2022-01-03 18:50:09</view>
				</view>
			</view>
			<view class="third-sp">
				<view class="third-sp_sp">
					<view class="tutu">
						<image class="third-sp_sp_tu" src="../../static/9.png"></image>
					</view>
					<view class="zcx">
						<view class="djzh"><text>顶级账号</text></view>
						<!-- <view class="third-sp_sp_zi"> -->
						<text class="third-sp-">测试测试测试测试测试测试测试测试测试测试测试测试测试</text>
						<!-- </view> -->
					</view>
					<view class="nans">英雄联盟-电信-艾欧尼亚</view>
					<view class="xiba">
						<image class="rz" src="../../static/xiba.png" mode="aspectFill"></image>
						<text class="sixth-tj_zh_mn">￥ 999999</text>
					</view>
					<view class="sjsj">上架时间：2022-01-03 18:50:09</view>
				</view>
			</view>
			<!-- </view> -->

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				multiArray: [
					['大区'],
					['电信', '网通', '峡谷之巅'],
					['黑色玫瑰', '艾欧尼亚', '裁决之地']
				],
				multiIndex: [0, 0, 0]
			}


		},

		methods: {
			bindMultiPickerColumnChange: function(e) {
				this.multiIndex[e.detail.column] = e.detail.value;
				switch (e.detail.column) {
					case 0: //拖动第1列
						switch (this.multiIndex[0]) {
							case 0:
								this.multiArray[1] = ['电信', '网通', '峡谷之巅'];
								this.multiArray[2] = ['黑色玫瑰', '艾欧尼亚', '裁决之地'];
								break;
						}
						this.multiIndex.splice(1, 1, 0);
						this.multiIndex.splice(2, 1, 0);
						break;
					case 1: //拖动第2列
						switch (
							this.multiIndex[0] //判断第一列是什么
						) {
							case 0:
								switch (this.multiIndex[1]) {
									case 0:
										this.multiArray[2] = ['黑色玫瑰', '艾欧尼亚', '裁决之地'];
										break;
									case 1:
										this.multiArray[2] = ['德玛西亚', '诺克萨斯'];
										break;
									case 2:
										this.multiArray[2] = ['峡谷之巅'];
										break;

								}
								break;

						};
						this.multiIndex.splice(2, 1, 0);
						break;
				}
				this.$forceUpdate();
			}
		}
	}
</script>

<style>
	page {
		background-color: #f4f4f4;
	}
	.pla{
		font-size: 15rpx;
	}

	.sjsj {
		color: #c2c2c2;
		font-size: 20rpx;
		margin-top: 10rpx;
		
	}

	.rz {
		width: 300rpx;
		height: 40rpx;
		margin-top: 10rpx;

	}

	.nans {
		color: #c2c2c2;
		font-size: 20rpx;
		clear: both;
		margin-top: 10rpx;
	}

	.xiba {
		clear: both;
		display: flex;
		justify-content: space-between;
		margin-top: 10rpx;
	}

	.zcx {
		/* float: left; */
		margin-top: 10rpx;

	}

	.third-sp- {
		font-size: 25rpx;
	}

	.djzh {
		background-color: red;
		color: white;
		border-radius: 10rpx;
		float: left;
		white-space: nowrap;
		font-size: 20rpx;
	}
	
	

	.sixth-tj_zh_mn {
		display: flex;
		justify-content: flex-end;
		color: red;
		font-size: 35rpx;
	}

	.third-sp_sp_zi {
		margin-top: 20rpx;
		display: flex;
	}
	
	.third-sp_sp{
		padding-left: 15rpx;
		padding-right: 15rpx;
	}

	.third {
		margin-top: 20rpx;
		display: flex;
		/* justify-content: center; */
		flex-direction: column;
		align-items: center;
	}

	.third-sp {
		background-color: #ffffff;
		width: 96%;
		height: 600rpx;
		margin-top: 30rpx;
		display: flex;
		align-items: center;
	}

	.tutu {
		display: flex;
		justify-content: center;
	}

	.third-sp_sp_tu {
		width: 90%;
		height: 300rpx;
	}




	.xzq {
		margin-top: 20rpx;
		background-color: #ffffff;
	}

	.ssk {
		background-color: #ffffff;
		margin-top: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100rpx;
		
	}

	.search {
		display: flex;
		align-items: center;
		border-radius: 40rpx;
		border: 3rpx solid black;
		height: 50rpx;
		width: 50%;
	}

	.search-ss {
		width: 100rpx;
		height: 60rpx;
		border-radius: 30rpx;
		justify-content: center;
		font-size: 20rpx;
		margin-left: 20rpx;
		background-color: black;
		color: white;
		display: flex;
		align-items: center;

	}

	.search-shuru {
		
		width: 600rpx;
		padding-left: 10rpx;
		height: 100%;

	}
</style>
